<template>
  <UseTemplate>
    <template slot="sou">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template slot="action">
          <div @click="onClickButton">搜索</div>
        </template>
      </van-search>
    </template>
    <template slot="nero">
      <div class="feli-1">
        <div class="feli-1-1">
          <van-sidebar v-model="active">
            <van-sidebar-item
              v-for="(item, index) in arr"
              :key="index"
              :title="item.name"
            />
          </van-sidebar>
        </div>
        <div class="feli-1-2">
          <div class="fel-max" v-for="(item, index) in getarr" :key="index">
            <div class="frl-top">
              <div class="flei-1"></div>
              <div class="ftext-1">{{ item.name }}</div>
            </div>
            <div class="nei-ft">
              <div
                class="nei-ft-1"
                v-for="(items, index) in item.data"
                :key="index"
              >
                <img class="img-s1" :src="items.img" alt="" />
                <div class="wenz-1">{{ items.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </UseTemplate>
</template>

<script>
import x1 from '@/assets/Notify/i4.png'
import x2 from '@/assets/Notify/i2.png'
import x3 from '@/assets/Notify/i5.png'
import x4 from '@/assets/Notify/i9.png'
import x5 from '@/assets/Notify/i8.png'
import x6 from '@/assets/Notify/i11.png'
import x7 from '@/assets/Notify/i3.png'
import x8 from '@/assets/Notify/i6.png'
import x9 from '@/assets/Notify/i7.png'
import x10 from '@/assets/Notify/i10.png'
import x11 from '@/assets/Notify/i1.png'
import UseTemplate from '@/components/UseTemplate.vue'
 
export default {
  components: {
    UseTemplate,
  },
  data() {
    return {
      value: '',
      active: 0,
      arr: [
        {
          name: '学业服务',
          children: [
            {
              name: '学业服务',
              data: [
                { name: '学生资助', img: x1 },
                { name: '访客进校', img: x2 },
                { name: '普通话等级考试查询', img: x3 },
                { name: '计算机等级证书查询', img: x4 }
              ]
            }
          ]
        },
        {
          name: '终身学习',
          children: [
            {
              name: '终身学习',
              data: [
                { name: '云上老年大学', img: x5 },
                { name: '浙里青年', img: x6 },
                { name: '浙学通', img: x7 }
              ]
            }
          ]
        },
        {
          name: '入职招聘',
          children: [
            {
              name: '入职招聘',
              data: [
                { name: '人才招聘', img: x8 },
                { name: '教职工入职通', img: x9 }
              ]
            }
          ]
        },
        {
          name: '招生就业',
          children: [
            {
              name: '招生就业',
              data: [
                { name: '高校招生考试证明办理', img: x10 },
                { name: '就业服务', img: x11 }
              ]
            }
          ]
        }
      ]
    }
  },
  computed: {
    getarr() {
      return this.arr[this.active].children
    }
  },
  methods: {
    onSearch(val) {
      // showToast(val)
    },
    onClickButton() {
      // showToast(this.value)
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .van-nav-bar__content {
  background: #2463fe;
  color: #fff;
}
.van-nav-bar {
  background: #2463fe;
}
.van-sidebar-item--select{
  color: #000;
  font-weight: 600;
}
.van-sidebar-item--select::before{
  background-color: #2463fe;
}
::v-deep .van-nav-bar__title {
  color: #fff;
}
.van-hairline--bottom:after {
  border-bottom-width: 0px;
}
.van-search {
  padding: 0;
  border-radius: 2px;
}
.feli-1 {
  width: 100%;
  height: 100%;
  display: flex;
}
.feli-1-2 {
  flex: 1;
  padding-top: 20px;
  box-sizing: border-box;
}
.fel-max {
  width: 100%;
}
.frl-top {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.flei-1 {
  width: 3px;
  height: 13px;
  margin-right: 14px;
  background: linear-gradient(142deg, #9ebaff 0%, #2463fe 100%);
}
.ftext-1 {
  font-weight: 500;
  font-size: 13px;
  color: #333333;
}
.nei-ft {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.nei-ft-1 {
  width: 33%;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}
.img-s1 {
  width: 40px;
  height: 40px;
}
.wenz-1 {
  font-weight: 400;
  font-size: 13px;
  color: #333333;
}
</style>